<!--  -->
<template>
  <div class="alert-model-bg" v-if="open">
    <div class="alert-model">
    <div>姓名：{{content.name}}</div>
    <div>性别：{{content.gender}}</div>
     <div>手机号码: {{content.phone}}</div>
      <div>来访事由: {{content.reason}}</div>
       <div>来访日期：{{content.time}}</div>
    <span  @click.prevent="close" class="btn-close">
      <svg
              class="icon"
              style="
                width: 2.4em;
                height: 3em;
                vertical-align: middle;
                fill: currentColor;
                overflow: hidden;
              "
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="1017"
            >
              <path
                d="M361.2 691.7c-6.4 0-12.8-2.4-17.7-7.3-9.8-9.8-9.8-25.6 0-35.3l304.4-304.4c9.8-9.8 25.6-9.8 35.3 0 9.8 9.7 9.8 25.6 0 35.3L378.9 684.4c-4.9 4.9-11.3 7.3-17.7 7.3z"
                fill="#fff"
                p-id="1018"
              ></path>
              <path
                d="M665.6 691.7c-6.4 0-12.8-2.4-17.7-7.3L343.6 380c-9.8-9.7-9.8-25.6 0-35.3 9.8-9.8 25.6-9.8 35.3 0l304.4 304.4c9.8 9.8 9.8 25.6 0 35.3-4.9 4.9-11.3 7.3-17.7 7.3z"
                fill="#fff"
                p-id="1019"
              ></path>
            </svg></span>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: 'AlertModel',
  props: ['content', 'open'],
  setup(props:any, context:any) {
    function close() {
      context.emit('close', false)
    }
    return {
      close
    }
  }
}
</script>
<style scoped>
button {
  cursor: pointer;
  user-select: none;
}
.alert-model-bg{
position:fixed;
display:flex;
align-items:center;
justify-content: center;
top:0;
left:0;
width:100%;
height:100%;
overflow: hidden;
background:rgba(0,0,0,0.6);
z-index: 1000;
}
.alert-model{
  position:relative;
  width:55rem;
  padding:10rem 5rem;
  background-color:#fff;
  font-size:3.2rem;
  line-height: 2;
  border-radius: 1.5rem;
  text-align: left;
  z-index: 10000;
}
.alert-model .btn-close{
  display:inline-block;
  position:absolute;
  top:-7rem;
  right:0;
  z-index: 10000;
  color:#fff;
  cursor: pointer;
}
</style>
